<template>
    <div class="article-list">
        <div class="article-list-card">
            <!--<div class="article-list-height">-->
                <!--<router-link :to="{name:'article-list-edit-nocache'}">-->
                    <!--<Button class="article-list-rightBtn" type="primary" size="large"><Icon type="plus-round"></Icon>新增文章</Button>-->
                <!--</router-link>-->
            <!--</div>-->
            <i-table height="680" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" width="360">
            <p slot="header" style="text-align:center">
                <a>币种详情</a>
            </p>
            <Form  style="margin-top: 20px">
                <FormItem label="名称" >
                    <Input v-model="coinList.name" placeholder="请输入名称"></Input>
                </FormItem>
                <FormItem label="涨跌幅" >
                    <Input v-model="coinList.size" placeholder="请输入涨跌幅"></Input>
                </FormItem>
                <FormItem label="24小时总量" >
                    <Input v-model="coinList.amount" placeholder="请输入24小时总量"></Input>
                </FormItem>
                <FormItem label="实时价格" >
                    <Input v-model="coinList.price" placeholder="请输入实时价格"></Input>
                </FormItem>
                <FormItem label="充值地址">
                    <Input v-model="coinList.chongzhi_url" placeholder="请输入充值地址"></Input>
                </FormItem>
                <FormItem label="提币最小值" >
                    <Input v-model="coinList.coin_out_min" placeholder="请输入提币最小值"></Input>
                </FormItem>
                <FormItem label="提币最大值" >
                    <Input v-model="coinList.coin_out_max" placeholder="请输入提币最大值"></Input>
                </FormItem>
                <FormItem label="提币手续费" >
                    <Input v-model="coinList.coin_out_fee_bl" placeholder="请输入提币手续费"></Input>
                </FormItem>
                <FormItem label="最大持有量" >
                    <Input v-model="coinList.max_num" placeholder="请输入最大持有量"></Input>
                </FormItem>
                <FormItem label="发行时间" >
                    <Input v-model="coinList.issue_time" placeholder="请输入发行时间"></Input>
                </FormItem>
                <FormItem label="发行总量" >
                    <Input v-model="coinList.issue_num" placeholder="请输入发行总量"></Input>
                </FormItem>
                <FormItem label="官网地址" >
                    <Input v-model="coinList.guanwang_url" placeholder="请输入官网地址"></Input>
                </FormItem>
                <FormItem label="白皮书地址" >
                    <Input v-model="coinList.book_url" placeholder="请输入白皮书地址"></Input>
                </FormItem>
                <FormItem label="区块地址" >
                    <Input v-model="coinList.qukuai_url" placeholder="请输入区块地址"></Input>
                </FormItem>
                <FormItem label="流通总量" >
                    <Input v-model="coinList.circulation_num" placeholder="请输入流通总量"></Input>
                </FormItem>
                <FormItem label="众筹价格" >
                    <Input v-model="coinList.crowd_price" placeholder="请输入众筹价格"></Input>
                </FormItem>
                <FormItem label="简介" >
                    <Input v-model="coinList.content" type="textarea" placeholder="请输入简介"></Input>
                </FormItem>

                <FormItem label="是否开启" >
                    <RadioGroup v-model="coinList.status">
                        <Radio label="1">开启</Radio>
                        <Radio label="2">关闭</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="转账开关" >
                    <RadioGroup v-model="coinList.zhuanzhang_kg">
                        <Radio label="1">开启</Radio>
                        <Radio label="2">关闭</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="充值开关" >
                    <RadioGroup v-model="coinList.is_chongzhi">
                        <Radio label="1">开启</Radio>
                        <Radio label="2">关闭</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="提现开关" >
                    <RadioGroup v-model="coinList.is_tixian">
                        <Radio label="1">开启</Radio>
                        <Radio label="2">关闭</Radio>
                    </RadioGroup>
                </FormItem>




            </Form>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="shownow">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"coin-list",
        data(){
            return{
                columns:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '名称',
                        key: 'name',
                        align:"center",
                    },
                    {
                        title: '图标',
                        key: 'logo',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            if(params.row.logo==""){
                                return "暂无"
                            }else{
                                return h("div",{
                                    style:{
                                        cursor: "pointer",
                                    },
                                    on:{
                                        mouseover:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mousemove:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mouseout:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:"",
                                                x:"0px",
                                                y:"0px",
                                            })
                                        }
                                    }
                                },[
                                    h("img",
                                        {
                                            attrs:{
                                                src:this.imgHttpUrl + params.row.logo
                                            },
                                            style:{
                                                width:"42px",
                                                height:"42px",
                                                borderRadius:"4px",
                                                margin:"0px auto",
                                                display:"block",
                                            },
                                        })
                                ])
                            }
                        }
                    },
                    {
                        title: '涨跌幅',
                        key: 'size',
                        align:"center",
                    },
                    {
                        title: '24小时总量',
                        key: 'amount',
                        align:"center",
                    },
                    {
                        title: '实时价格',
                        key: 'price',
                        align:"center",
                    },
                    {
                        title: '是否开启',
                        key: 'status',
                        align:"center",
                        render:(h,params)=>{
                            if(params.row.status==1){
                                return '已开启'
                            }
                            else{
                                return '待开放'
                            }
            }
                    },
                    // {
                    //     title: '内容',
                    //     key: 'content',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return h('span',{
                    //             domProps: {
                    //                 innerHTML: params.row.content
                    //             },
                    //             style:{
                    //                 display: '-webkit-box',
                    //                 overflow: 'hidden',
                    //                 height:'40px'
                    //
                    //             }
                    //
                    //         })
                    //     }
                    // },

                    // {
                    //     title: '分类',
                    //     key: 'catname',
                    //     align:"center",
                    // },
                    // {
                    //     title: '是否显示',
                    //     key: 'status',
                    //     align:"center",
                    //     width: 100,
                    //     render:(h,params)=>{
                    //         return h("div",
                    //             [
                    //                 h("Icon",{
                    //                     props:{type: params.row.status==1?'eye':'eye-disabled'}
                    //                 }),
                    //                 h("span",params.row.status==1?' 显示':' 隐藏')
                    //             ]
                    //         )
                    //     }
                    // },
                    // {
                    //     title: '排序号',
                    //     key: 'id',
                    //     align:"center",
                    //     width: 100,
                    // },
                    // {
                    //     title: '创建时间',
                    //     key: 'add_time',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return this.timeFormat(params.row.add_time)
                    //     }
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('ButtonGroup', [
                    // h('Button', {
                    //     props: {
                    //         type: 'warning',
                    //     },
                    //     on: {
                    //         click: () => {
                    //             this.tiao(params.index)
                    //         }
                    //     }
                    // },"修改"),
                    h('Button', {
                        props: {
                            type: 'primary',
                        },
                        on: {
                            click: () => {
                                this.show(params.index)
                            }
                        }
                    }, '查看详情'),
                    // h('Button', {
                    //     props: {
                    //         type: 'error',
                    //     },
                    //     on: {
                    //         click: () => {
                    //             this.remove(params.index)
                    //         }
                    //     }
                    // }, '删除')
                    ]);
                    }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                modal2:false,
                modal3:false,
                doIndex:0,//操作的下标
                modal_loading:false,
                password:'',
                coinList:{
                    id:'',
                    name:'',
                    size:'',
                    amount:'',
                    price:'',
                    chongzhi_url:'',
                    coin_out_max:'',
                    coin_out_fee_bl:'',
                    coin_out_min:'',
                    issue_time:'',
                    issue_num:'',
                    guanwang_url:'',
                    book_url:'',
                    qukuai_url:'',
                    circulation_num:'',
                    crowd_price:'',
                    content:'',
                    max_num:'',
                    zhuanzhang_kg:'',
                    is_chongzhi:'',
                    is_tixian:'',
                    status:'',
                },
            }
        },
        activated(){
            this.getArticleList()
        },
        methods:{
            getArticleList(){
                this.getJsonData("Currency/getCurrencyList",{})
                    .then((res)=>{
                        this.data=res.data
                        this.total=parseInt(res.count)
                    })
            },
            changePage(n){
                this.index=n
                this.getArticleList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getArticleList()
            },
            remove(n){
                this.doIndex=n
                this.modal2=true
            },
            show(n){
                this.doIndex=n
                this.getJsonData("Currency/getCurrencyDetails",{id:this.data[this.doIndex].id})
                    .then((res)=>{
                        this.coinList = res.data
                        this.modal3=true
                    })

            },
            del(){
                this.modal_loading = true;
                this.getJsonData("Art/deleteArt",{id:this.data[this.doIndex].id},true)
                    .then((res)=>{
                        this.getArticleList()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('删除成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            shownow(){
                this.coinList.id = this.data[this.doIndex].id
                this.modal_loading = true;
                this.getJsonData("Currency/changeCurrencyById",this.coinList,true)
                    .then((res)=>{
                        this.getArticleList()
                        this.modal_loading = false;
                        this.modal3 = false;
                        this.$Message.success('修改成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal3 = false;
                })
            },
            tiao(n){
                this.$router.push({name:"article-add-nosave",query:{isEdit:true,id:this.data[n].id,type:2}})
            },
        }
    }
</script>
<style lang="less">
    @import "./coin-list";
</style>